<template>
	
	<div>
		<!-- Hotcities热门城市 -->
		<div class="city-hot">
			<div class="hot-title">热门城市</div>
			<ul class="hot-list">
				<li v-for="(item,index) in hotCities" :key='index' @click="changeCityName(item.name)">
					{{item.name}}
				</li>
			</ul>
		</div>
		
		<!-- 字母排序 -->
		<div class="city-letter">
			<div class="letter-title">字母排序</div>
			<ul class="letter-list">
				<li v-for="(item,index) in city" :key='item.id'>{{item.initial}}</li>
			</ul>
		</div>
		
		<!-- List城市首字母列表 -->
		<div class="city-list">
				<div v-for="(item,index) in city" :key='item.id'>
					<div class="list-title">{{item.initial}}</div>
					<ol class="list-item" >
						<li v-for="(item,index) in item.list" :key='item.id' @click="changeCityName(item.name)">{{item.name}}</li>
					</ol>
				</div>
			</div>
	</div>
</template>

<script>
	import {mapMutations} from 'vuex'
	
	export default{
		props:['city','hotCities'],	//接受父组件传递的数据
		methods:{
			//当点击changeCityName  1.获取当前被点击的li标签的城市名；2.跳转到首页
			//3.绑定Vuex的Mutations事件之间
			changeCityName(cityName){
				this.changeCity(cityName);
				this.$router.push('/')
			},
			//调用vuex内
			...mapMutations(['changeCity'])
		}
	}
</script>

<style scoped >
	/* <!-- Hotcities热门城市 --> */
	.city-hot{
		width: 100%;
		font-size: 0.28rem;
	}
	.hot-title{
		padding: 0.2rem 0.3rem;
	}
	.hot-list{
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
	}
	.hot-list:before{
		content: "";
		position: absolute;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		width: 33.333%;
		height: 100%;
		left: 33.333%; /* 左边的作用，是将覆盖在*/
	}
	.hot-list li{
		width: 33.333%;
		height: 0.9rem; /* 45px*/
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;
	}
	
	
	/* <!-- letter字母排序 --> */
	.city-letter{
		width: 100%;
		font-size: 0.28rem;
	}
	.letter-title{
		padding: 0.2rem 0.3rem;
	}
	.letter-list{
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
	}
	
	.letter-list li{
		width: 16.666%;
		height: 0.9rem; /* 45px*/
		text-align: center;
		line-height: 0.9rem;
		float: left;
	}
	
/* 	<!-- List城市首字母列表 --> */
	
	.city-list{
		width: 100%;
		font-size: 0.28rem;
	}
	.list-title{
		padding: 0.2rem 0.3rem;
	}
	.list-item{
		background-color: white;
		color: #212121;
		position: relative;
		overflow: hidden;
	}
	.list-item:before{
		content: "";
		position: absolute;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		width: 25%;
		height: 100%;
		left: 25%; /* 左边的作用，是将覆盖在*/
	}
	.list-item:after{
		content: "";
		position: absolute;
		border-right: 1px solid #ddd;
		width: 0%;  /* 解决第三列的不可点击效果*/
		height: 100%;
		right: 25%;
	}
	.list-item li{
		width: 25%;
		height: 0.9rem; /* 45px*/
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;  /* 解决第二列的不可点击效果*/
	}
</style>
